<section class="card" ng-init="init()" id="sio-messenger"
    ng-class="{'collape': isHide}"
>
    <div class="card-header">
        <h6>Messenger - {{connectionId}}</h6> 
        <a class="btn btn-contact btn-success" ng-click="toggleContact()">Available({{members.length}})</a>
        <a class="btn btn-toggle btn-info" ng-click="toggle()"><i ng-class="{'fa-minus': !isHide ,'fa-plus': isHide}" class="fa fa-minus"></i></a>
    </div>
    <div class="row card-body">
        <div class="col-12">
            </h1>
            <div ng-if="!user.loggedIn">
                <a href="#" ng-click="login()">Login</a>
            </div>
            <div ng-if="user.loggedIn" class="container">
                <div id="sio-discussion" class="discussion">
                    <div class="row" ng-repeat="msg in messages">
                        <div class="col-md-12" ng-class="{ 'text-right': msg.connection.id == user.info.id }">
                            <img imageonload src="{{msg.connection.avatar}}" /> <b class="small">{{msg.connection.name}}</b>
                            <br /><span class="small" ng-bind="msg.createdDate | utcToLocal:'dd.MM.yyyy hh:mm:ss'"></span>
                            <p ng-bind-html="msg.content"></p>
                        </div>
                    </div>
                </div>
                <div class="action">
                    <textarea placeholder="message" ng-enter="sendMessage()" class="form-control" ng-model="message.content"></textarea>
                    <a class="btn btn-info" ng-click="sendMessage()">Send</a>
                </div>
            </div>
        </div>
        <div class="contact" ng-class="{'collape': hideContact}">
            <ul>
                <li ng-repeat="m in members">
                    <img imageonload src="{{m.avatar}}" />  <span ng-bind="m.name"></span>
                </li>
            </ul>
        </div>
    </div>
</section>
<!-- /.content -->
